<template>
  <div class="search-condition font-14">
    <ul class="flex mar-t-18" v-for="(item, index) of list" :key="index">
      <li class="pad-t-4" :class="title5 && item.sortName.length === 4? 'pad-r-15':''">{{item.sortName}}:</li>
      <li class="flex condition-set-box flex-item mar-l-8">
        <ul class="condition-set flex flex-wrap">
          <li v-for="(subitem, subindex) of item.sortList" :key="subindex" class="mar-l-14" :class="subindex === item.active ? 'active-item' : ''" @click="changeComditions(item, subindex)">{{subitem}}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import { listGoodsCategory, listWholesaleGoodsCategory } from '@/api/goods/goods'
export default {
  data() {
    return {
      list: [],
      sales: {
        0: { },
        1: { min: 0, max: 100 },
        2: { min: 100, max: 1000 },
        3: { min: 1000, max: 10000 },
        4: { min: 10000, max: 50000 },
        5: { min: 50000, max: 100000 },
        6: { min: 100000, max: 1000000 },
        7: { min: 1000000, max: '' }
      },
      dataList: {},
      wholesaleGoodsCategory: {},
      result: {},
      title5: false
    }
  },
  props: {
    comditions: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.initList()
    this.resetComditions()
  },
  methods: {
    // 获取筛选条件信息
    getComdition() {
      this.comditions.forEach((item, index) => {
        switch (item) {
          case 'goodsType':
            this.$set(this.result, 'goodsType', 30)
            this.list.push({
              sortName: '商品分类',
              sortList: {
                '30': '零售商品',
                '31': '批发商品'
              },
              active: '30',
              en: 'goodsType'
            })
            break
          case 'sales':
            this.$set(this.result, 'maxSalesNum', '')
            this.$set(this.result, 'minSalesNum', '')
            this.list.push({
              sortName: '商品销量',
              sortList: ['不限', '<100', '100-1k', '1k-1w', '1-5w', '5-10w', '10-100w', '>100w'],
              active: 0,
              en: 'sales'
            })
            break
          case 'Performance':
            this.$set(this.result, 'maxTotalPrice', '')
            this.$set(this.result, 'minTotalPrice', '')
            this.list.push({
              sortName: '业绩销售额',
              sortList: ['不限', '<100', '100-1k', '1k-1w', '1-5w', '5-10w', '10-100w', '>100w'],
              active: 0,
              en: 'Performance'
            })
            this.title5 = true
            break
          case 'goodsSource':
            this.$set(this.result, 'goodsSource', '')
            this.list.push({
              sortName: '商品来源',
              sortList: {
                '0': '全部',
                '1': '平台自营',
                '2': '供应商',
                '3': '淘宝'
              },
              active: '0',
              en: 'goodsSource'
            })
            break
          case 'saleSource':
            this.$set(this.result, 'saleSource', '')
            this.list.push({
              sortName: '销售渠道',
              sortList: {
                '0': '全部',
                '1': '微信',
                '2': '抖音',
                '3': '快手',
                '4': '淘宝'
              },
              active: '0',
              en: 'saleSource'
            })
            break
          case 'oneCategory':
            this.$set(this.result, 'oneCategoryId', '')
            this.list.push({
              sortName: '商品分类',
              sortList: this.dataList,
              active: 'all',
              en: 'oneCategory'
            })
            break
        }
        this.listCopy = this.list
      })
    },
    // 初始化企业商品分类
    initList() {
      // 零售商品分类信息
      listGoodsCategory(this.getEnterpriseId()).then(response => {
        this.dataList = { all: '全部' }
        response.data.forEach(item => {
          this.dataList[item.categoryId] = item.label
        })
        this.getComdition()
      })
      // 批发分类信息获取
      listWholesaleGoodsCategory(this.getEnterpriseId()).then(response => {
        this.wholesaleGoodsCategory = { all: '全部' }
        response.data.forEach(item => {
          this.wholesaleGoodsCategory[item.categoryId] = item.label
        })
      })
    },
    // 重置赛选条件
    resetComditions() {
      this.$bus.$on('resetComditions', () => {
        this.list.forEach(item => {
          switch (item.en) {
            case 'goodsType':
              item.active = '30'
              break
            case 'oneCategory':
              item.active = 'all'
              break
            case 'sales':
              item.active = 0
              break
            case 'Performance':
              item.active = 0
              break
            case 'goodsSource':
              item.active = '0'
              break
            case 'saleSource':
              item.active = '0'
              break
          }
        })
      })
    },
    // 切换查询条件
    changeComditions(item, key) {
      item.active = key
      switch (item.en) {
        case 'goodsType':
          this.result.goodsType = key * 1
          if (this.result.goodsType === 31) {
            this.$set(this.result, 'saleSource', '')
            this.list.forEach((item, index) => {
              if (item.en === 'saleSource') {
                this.list.splice(index, 1)
              }
              if (item.en === 'oneCategory') {
                item.sortList = this.wholesaleGoodsCategory
              }
            })
          } else {
            this.list.forEach((item) => {
              if (item.en === 'oneCategory') {
                item.sortList = this.dataList
              }
            })
            this.list.push({
              sortName: '销售渠道',
              sortList: {
                '0': '全部',
                '1': '微信',
                '2': '抖音',
                '3': '快手',
                '4': '淘宝'
              },
              active: '0',
              en: 'saleSource'
            })
          }
          break
        case 'sales':
          this.result.maxSalesNum = key ? this.sales[key]['max'] * 1 : ''
          this.result.minSalesNum = key ? this.sales[key]['min'] * 1 : ''
          break
        case 'Performance':
          console.log(key)
          this.result.maxTotalPrice = key && key !== 7 ? this.sales[key]['max'] * 1 : ''
          this.result.minTotalPrice = key ? this.sales[key]['min'] * 1 : ''
          break
        case 'goodsSource':
          this.result.goodsSource = key === '0' ? '' : key * 1 - 1
          break
        case 'saleSource':
          this.result.saleSource = key === '0' ? '' : key * 1 - 1
          break
        case 'oneCategory':
          this.result.oneCategoryId = key === 'all' ? '' : key
          break
      }
      console.log(this.result)
      this.$emit('changeComditions', this.result)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .search-condition {
    color:rgba(255,255,255,0.5);
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .condition-set-box {
      .condition-set {
        li {
          padding: 4px 11px 4px 11px;
          margin-bottom: 18px;
        }
        li:not(:first-child) {
          margin-left: 45px;
        }
        li:hover{
          cursor:pointer
        }
        .active-item {
          background: #0A89FF;
          color: #fff;
        }
      }
    }
  }
</style>